<template>
  <div
    class="login-container"
    style="display: flex; flex-direction: column; height: 100vh"
  >
    <div class="container-head flex" style="background:#09D0CE">
      <div style="-webkit-app-region: drag;color:#FFFFFF">新用户注册</div>
      <div style="flex: 1; height: 46px; -webkit-app-region: drag"></div>
      <div class="head-right flex">
        <div class="user-info flex">
          <div class="window-min cursor" @click="winMin"></div>
          <div class="window-close cursor" @click="winClose"></div>
        </div>
      </div>
    </div>
    <div class="login-content-box flex">
      <div class="form-item flex">
        <img src="~@/assets/email-icon.png" alt="">
        <input
          placeholder="请输入邮箱"
          v-model="formData.email"
        />
      </div>
      <div class="form-item flex">
        <img src="~@/assets/pwd.png" alt="">
        <input
          :type="showPwd?'text':'password'"
          placeholder="请输入密码"
          v-model="formData.passwd"
        />
        <img v-if="showPwd" src="~@/assets/eye-close.png" alt="" @click="changePwd(false)">
        <img v-else src="~@/assets/eye.png" alt="" @click="changePwd(true)">
      </div>
      <div class="form-item flex">
        <img src="~@/assets/pwd.png" alt="">
        <input
          :type="showPwd2?'text':'password'"
          placeholder="请再次输入密码"
          v-model="formData.repasswd"
        />
        <img v-if="showPwd2" src="~@/assets/eye-close.png" alt="" @click="changePwd2(false)">
        <img v-else src="~@/assets/eye.png" alt="" @click="changePwd2(true)">
      </div>
      <div class="form-item flex">
        <img src="~@/assets/email-icon.png" alt="">
        <input
          placeholder="请输入邀请码（选填）"
          v-model="formData.code"
        />
      </div>
      <el-button class="form-item flex login-btn" @click="register" :loading="loading">注  册</el-button>
      <el-button type="text" class="flex cursor" style="margin-top:23px;color: #09D0CE;" @click="goLogin">使用已有账号登录</el-button>
    </div>
  </div>
</template>

<script>
import {registerUser} from '../utils/api'
const { remote } = require('electron')
export default {
  name: "login",
  data() {
    return {
      loading:false,
      showPwd:false,
      showPwd2:false,
      formData:{
        passwd:'',
        repasswd:'',
        email:'',
        code:'',
        mac_address:''
      }
    };
  },
  mounted(){
    remote.getCurrentWindow().setSize(500, 560)
  },
  methods: {
    changePwd(type){
      this.showPwd = type
    },
    changePwd2(type){
      this.showPwd2 = type
    },
    validateEmail(){
      let checkmail =/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return checkmail.test(this.formData.email)
    },
    winMin() {
      this.$electron.ipcRenderer.send("window-min");
    },
    winClose() {
      this.$electron.ipcRenderer.send("window-close");
    },
    register(){
      const data = this.formData
      if(this.formData.email.length == 0){
        this.$message.error("邮箱不能为空")
        return;
      }
      if(!this.validateEmail()){
        this.$message.error('请输入正确的邮箱')
        return
      }
      if(this.formData.passwd.length == 0){
        this.$message.error("密码不能为空")
        return;
      }
      if(this.formData.passwd != this.formData.repasswd){
        this.$message.error("两次密码不一致")
        return;
      }
      if(this.formData.passwd.length <8){
        this.$message.error("请设置8位以上的密码")
        return;
      }
      this.getMacAddress();
      this.loading = true
      registerUser(data).then(res => {
        this.loading = false
        if(res.data.ret == 1){
          this.$localStore.set("access_token",res.data.data.token)
          this.$localStore.set("email",this.formData.email)
          this.$localStore.set("userInfo",res.data.data.user)
          this.$router.push({
            path:'/home'
          })
        }else{
          this.$message.error(res.data.msg)
        }
      }).catch(()=>{
        this.loading = false
      })
    },
    goLogin(){
      this.$router.push({
        path:'/login'
      })
    },
    getMacAddress: function () {
      let networkInterfaces = require("os").networkInterfaces();
      for (let networkInterfacesKey in networkInterfaces) {
          this.formData.mac_address = networkInterfaces[networkInterfacesKey][0].mac
          break
      }
    }
  },
};
</script>

<style>
.login-content-box{
  width: 360px;
  margin:0 auto;
  margin-top: 50px;
  flex-direction: column !important;
}
.login-icon{
  width: 109px;
  height: 103px;
  margin-bottom: 49px;
  background: url('../assets/login-icon.png') left top no-repeat;
  background-size: 100%;
}
</style>